<template>
	<view class="content">
    <wd-form ref="form" custom-class="custom-form" :model="model" errorType="message">
		<uni-collapse ref="collapseRef">
			<uni-collapse-item class="h-auto" title="默认开启" :show-arrow="false" :open="open.first">
				<view>
          <wd-cell-group border>
            <wd-input
                label="用户名"
                label-width="100px"
                prop="value1"
                clearable
                v-model="model.value1"
                placeholder="请输入用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <wd-input
                label="密码"
                label-width="100px"
                prop="value2"
                show-password
                clearable
                v-model="model.value2"
                placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <wd-input
                v-for="(item, index) in model.phoneNumbers"
                :key="item.key"
                :label="'玛卡巴卡单号' + index"
                :prop="'phoneNumbers.' + index + '.value'"
                label-width="100px"
                clearable
                v-model="item.value"
                placeholder="玛卡巴卡单号"
                :rules="[{ required: true, message: '请填写玛卡巴卡单号' + index }]"
            />
          </wd-cell-group>
					<view class="text-center flex justify-around" >
            <view @click="onDelItem">
              <uni-icons type="minus"></uni-icons>
            </view>
            <view @click="onAddItem">
              <uni-icons type="plus"></uni-icons>
            </view>
					</view>
				</view>
			</uni-collapse-item>
      <view class="text-center h-100 flex justify-center w-full items-center" @click="open.first = !open.first">
        <uni-icons type="up" v-if="open.first" ></uni-icons>
        <uni-icons v-else type="down"></uni-icons>
      </view>
			<uni-collapse-item title="折叠内容">
					<text>折叠内容</text>
			</uni-collapse-item>
			<uni-collapse-item title="禁用状态" disabled>
				<text>折叠内容</text>
			</uni-collapse-item>
		</uni-collapse>
    </wd-form>
    <view class="text-center">
      <view class="text-center">
        <wd-button type="primary" @click="onSubmit">提交</wd-button>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list: [
					{ name: 'test1'},
          { name: 'test2'},
				],
        open: {
          first: true
        },
        model: {
          value1: '',
          value2: '',
          phoneNumbers: [
            {
              value: ''
            }
          ]
        }
			}
		},
		onLoad() {

		},
		methods: {
      onSubmit() {
        this.$refs.form.validate().then(res => {
          console.log(res)
          this.$nextTick(() => {
            this.$refs.collapseRef.resize()
          })
        }).catch(err => {
          console.log(err)
        })
      },
      onDelItem(){
        this.model.phoneNumbers.pop()
        this.$nextTick(() => {
          this.$refs.collapseRef.resize()
        })
      },
      onAddItem() {

        this.model.phoneNumbers.push({
          value: ''
        })
        this.$refs.form.validate()

        this.$nextTick(() => {
          this.$refs.collapseRef.resize()
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.content {
		padding: 20rpx;
    ::v-deep .custom-form .wd-input__inner {
      text-align: right;
    }
	}
</style>
